@import (reference) 'config';
@import (reference) '../../../app/less/typography';
@import (reference) 'icons';

w-dex-order-book {
  display: block;
  width: 100%;
  height: 100%;
  text-align: right;

  &.has-order-book {
    w-empty-block,
    w-error-block {
      display: none;
    }
    w-table {
      display: block;
    }
  }

  w-table {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;

    .table-row {
      height: 100%;
    }

    w-row {
      padding: 0 10px 0 5px;
      position: relative;
      height: 22px;
      line-height: 23px;
      font-size: @font-size-caption-2;

      &[data-price]:hover {
        background-color: @hover-default;
        border-color: @color-basic-200;
      }

      w-cell {
        z-index: 2;
      }
    }

    w-thead {
      color: @color-basic-600;
      border-bottom: 1px solid @color-disabled-100;

      w-row {
        padding: 0 14px 0 5px;
        background: @color-white;
        height: 28px;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid @color-basic-100;

        &:hover {
          background: @color-white;
          border-bottom: 1px solid @color-basic-100;
        }

        w-cell {
          text-transform: capitalize;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .table-cell {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 27px;
        }
      }
    }

    w-tbody {
      overflow-y: auto;
      display: block;
      height: 100%;
    }
  }

  w-scroll-box {
    height: calc(100% ~'- 28px');
    max-height: calc(100% ~'- 28px');
    overflow: auto;
    display: block;

    w-row.active::before {
      background-repeat: no-repeat;
      width: 10px;
      height: 10px;
      left: 6px;
      top: 50%;
      display: block;
      content: '';
      z-index: 3;
      transform: translateY(-50%);
      position: absolute;
    }

    .asks,
    .bids {
      overflow: hidden;
    }

    .asks w-row,
    .bids w-row {
      position: relative;

      &[data-price] {
        cursor: pointer;
      }

      .tooltip-dex,
      .tooltip-dex::before {
        right: 50%;
        transform: translate(50%,0);
        color: @color-white;
      }
    }

    .asks w-row {
      .tooltip-bid {
        display: none;
      }
    }

    .bids w-row {
      .tooltip-ask {
        display: none;
      }
    }

    .dex-layout {
      &__line-graph {
        height: 100%;
        width: 100%;
        z-index: 1;
        top: 0;
        left: 0;
        position: absolute;

        &-fill {
          height: 100%;
        }
      }
    }

    .asks w-row {
      &.active::before {
        background-image: url(/img/icons/active-order-arrow-ask.svg);
      }

      .dex-layout {
        &__line-graph {
          &-fill {
            background-color: @color-graph-ask;
          }
        }
      }
    }

    .bids w-row {
      &.active::before {
        background-image: url(/img/icons/active-order-arrow-bid.svg);
      }

      .dex-layout {
        &__line-graph {
          &-fill {
            background-color: @color-graph-bid;
          }
        }
      }
    }
  }

  .decimal-muted {
    opacity: 0.5;
  }

  .info {
    border-top: 1px solid @color-basic-100;
    border-bottom: 1px solid @color-basic-100;
    background: @color-white;
    display: flex;
    align-items: center;
    text-align: right;
    font-size: 9px;
    width: 100%;
    min-height: 43px;
    padding-right: 10px;
    text-transform: uppercase;

    .spread {
      &::after {
        content: '%';
        display: inline-block;
      }
    }

    div {
      flex-basis: 33.3%;
    }

    .last-price {
      .body-1();
      font-family: @font-roboto-regular;
      font-weight: bold;
      font-size: 15px;
      position: relative;
      white-space: nowrap;
      padding-left: 5px;

      &:after {
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        content: '';
        width: 18px;
        height: 18px;
        display: block;
        right: -18px;
        top: 2px;
      }

      &.buy {
        color: @color-submit-300;

        &:after {
          background-image: @arrow-orderbook-top-icon;
        }
      }

      &.sell {
        color: @color-error-400;

        &:after {
          background-image: @arrow-orderbook-down-icon;
        }
      }
    }

  }

  .asks .cell-1 {
    color: @color-error-400;
  }

  .bids .cell-1 {
    color: @color-submit-600;
  }
}

@media screen and (max-width: 659px) {
  body.dex .dex-wrapper,
  body.dex-demo .dex-wrapper {
    w-dex-order-book {
      min-height: 360px;

      .wrapper {
        min-height: 322px;
      }

      w-scroll-box {
        max-height: 155px;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
  }
}
